<p>Changing route in javascript and react is handled differently. In javascript, it is straightforward. javascript has some methods on the <code>window</code> object. We can use these methods and change location easily.</p>
<p><strong>Change location using JavaScript</strong></p>
<p>To change to a location use location.href.</p>
<pre class="language-javascript"><code>window.location.href='https://otherpage.com';</code></pre>
<p>This will change location to <code>https://otherpage.com</code>.</p>
<p><strong>Replace location using JavaScript</strong></p>
<pre class="language-javascript"><code> window.location.replace('https://anotherpage.com'); </code></pre>
<p>This will replace location to <code>https://another.com</code>.</p>
<p><br /><strong>Routing in React<br /></strong></p>
<p>In React, routing is done by using third-party packages for example react-router-dom, react-router-redux, wouter, etc.&nbsp; These packages use history API internally for routing. <br /><br />Take an example of react-router-dom.&nbsp;</p>
<p><strong>Change location</strong></p>
<pre class="language-javascript"><code>history.push(location)</code></pre>
<p>This will change location and your <em>componentDidMount</em>() method will be invoked so that HTTP requests can be made.<br /><br /><strong>Replace location</strong><br />In the same way, you can replace location using replace method.</p>
<pre class="language-javascript"><code>history.replace(location)</code></pre>
<p><br />React Router uses the history API of javascript under the hood and exposes a wrapper for navigation to the target locations. This wrapper lets you easily manage session history anywhere JavaScript runs. A <code>history</code> object abstracts away the differences in various environments and provides a minimal API that lets you navigate, manage the history stack, and persist state between sessions.</p>
<p><code></code></p>

How to redirect or navigate to another page in javascript and react

<p>Writing react component in typescript makes your code easily maintainable because your components would be aware of props they would have knowledge on what props they would need while you use them, you will have to pass the same set of props to them, they won't allow unwanted props and would show error message in your editor.</p>
<p>Here is an example of the building block of a typescript react component.<br /><br /></p>
<pre class="language-javascript"><code>import React, { FunctionComponent } from 'react'

interface CardProps {
    price: number,
    addToWishlist: () =&gt; void,
    isAvailable?: boolean
}

const Card: FunctionComponent&lt;CardProps&gt; = (props) =&gt; {
    const {
        price,
        addToWishlist,
        isAvailable
    } = props;
    return (
        &lt;div&gt;
            Price {price}
            &lt;button onClick={addToWishlist}&gt;Add to wishlist&lt;/button&gt;
            {
                isAvailable &amp;&amp;
                "Available"
            }

        &lt;/div&gt;
    )
}

export default Card;
</code></pre>
<p>&nbsp;And import it like below:</p>
<pre class="language-markup"><code>&lt;Card price={price} addToWishlist={addToWishlist} /&gt;</code></pre>
<p>&nbsp;</p>
<p>As you can see, this component is showing the price, has a function to add the item to the wishlist, and has one optional prop -- location. Here the location prop is optional. You not necessarily need to pass it as props while you import this component.&nbsp;<br /><br />We are using the interface here for named type objects. Simply say -- An <em>interface declaration</em> is a name for the object type. This object type will have definition details of all the props a component would need in order to use it.<br /><br /><code>FunctionComponent</code> is a generic type provided by the react official typings. It allows for optional child components. Render children like below:</p>
<pre class="language-javascript"><code>{ children }</code></pre>
<p>So while your component has these features you would not worry that your component would get unwanted props because it would not allow them.</p>
<p>The component is tightly coupled with props. And that is what makes this component a great component. It is a fine piece of code.<br /><br />You should be aware of <code>Typescript - Types</code> feature. These are the most common features that you require for react components.&nbsp; Though typeScript provides data types as a part of its optional Type System, if you chose to use types then you need to declare them. The data type classification is as given below &minus;</p>
<ol>
<li>
<div><strong>array</strong></div>
<div><span style="color: #236fa1;"><span style="color: #000000;"><code>Array&lt;number&gt;</code>, <code>Array&lt;string&gt;</code>, <code>Array[object]</code></span></span></div>
<div>or</div>
<div><code>number[]</code>, <code>string[]</code>, <code>object<span data-en-todo="true">[]</span></code>,<br /><br /></div>
</li>
<li><strong>The primitives: string, number and boolean<br /></strong><code>string</code>, <code>number</code>, <code>boolean</code><br /><br /></li>
<li>
<div><strong>object Types</strong></div>
<div><code>object</code><br /><br /></div>
</li>
<li>
<div><strong>any</strong></div>
<div>TypeScript also has a special type, any, that you can use whenever you don&rsquo;t want a particular value to cause type-checking errors.</div>
<div><code>any</code><br /><br /></div>
</li>
<li>
<div><strong>void</strong></div>
<div>Use void when return is not required. This is useful when you don't want to return any output from functions.</div>
<div><code>void</code><br /><br /></div>
</li>
<li>
<div><strong>null and undefined</strong></div>
<div>JavaScript has two primitive values used to signal absent or uninitialized values: null and undefined.</div>
<div><code>null</code>, <code>undefined</code>&nbsp;<br /><br /></div>
</li>
<li>
<div><strong>Interface</strong><br />An <em>interface declaration</em> is a name for the object type<br />
<pre class="language-javascript"><code>interface Point {
    x: number;
    y: number;
}</code></pre>
<p>&nbsp;</p>
</div>
</li>
<li>
<div><strong>Type Aliases</strong><br />
<div>A&nbsp;<em>type alias</em>&nbsp;is a&nbsp;<em>name</em>&nbsp;for any&nbsp;<em>type</em>. we can use the same type more than once and refer to it by a single name. You can also use Type Aliases in place of interface for react component.The syntax for a type alias is:</div>
<div>
<pre class="language-javascript"><code>type Point = {
    x: number;
    y: number;
};</code></pre>
</div>
<div>&nbsp;</div>
<div>Almost all features of an interface are available in type, the key distinction is that a type cannot be re-opened to add new properties vs an interface that is always extendable.<br /><br /></div>
</div>
</li>
<li><strong>Union</strong><br />
<div>TypeScript&rsquo;s type system allows you to build new types out of existing ones using a large variety of operators. This feature of typescript is called union. When you not the sure type of variable you can allow multiple types like below:<br /><br /></div>
<div><code>let id: number | string;</code></div>
</li>
</ol>
<p><code></code>So now you know the basic building block of the typescript react component and the Typescript Types it would require, you would be able to create the bigger and complex component now. You can refer to the building block and base component that is written in the beginning of the post.</p>
<p><code></code></p>

Write react components in typescript - a model component

<div data-block="true" data-editor="eki07" data-offset-key="e2l00-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="e2l00-0-0"><span data-offset-key="e2l00-0-0">A closure is a function that remembers its outer variables and can access them. All functions in JavaScript are closures.</span></div>
</div>
<div data-block="true" data-editor="eki07" data-offset-key="7582v-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="7582v-0-0"><span data-offset-key="7582v-0-0">&nbsp;</span></div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="7582v-0-0">The closure has three scope chains:</div>
</div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="8o44b-0-0">
<ul class="">
<li id="8314" class="jf jg gl jh b ji jj jk jl jm jn jo jp jq jr js jt ju jv jw jx jy jz ka kb kc le lf lg eo" data-selectable-paragraph="">it has access to its own scope &mdash; variables defined between its curly brackets</li>
<li id="f5bb" class="jf jg gl jh b ji lh jk jl jm li jo jp jq lj js jt ju lk jw jx jy ll ka kb kc le lf lg eo" data-selectable-paragraph="">it has access to the outer function&rsquo;s variables</li>
<li id="622a" class="jf jg gl jh b ji lh jk jl jm li jo jp jq lj js jt ju lk jw jx jy ll ka kb kc le lf lg eo" data-selectable-paragraph="">it has access to the global variables</li>
</ul>
</div>
<div data-block="true" data-editor="eki07" data-offset-key="1br7c-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="1br7c-0-0"><span data-offset-key="1br7c-0-0">Example of closure</span></div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="1br7c-0-0">
<pre class="language-javascript"><code>function outer() {
  let i = 1;
  return function inner() {
    const a = 10;
    const result = a * i;
    i = i + 1;
    return result;
  };
}

const inner = outer(); //get instance of inner function

console.log(inner()); // 10
console.log(inner()); // 20
console.log(inner()); // 30
</code></pre>
<p>&nbsp;</p>
<p>Use:<br />Mostly, closures are used for encapsulation in javascript. You can declare private variables using closures. These variables will be hidden for other functions/methods. Consider another example of closure as:</p>
<pre class="language-javascript"><code>function counter() {
  var c = 0;
  return {
    inc: function () {
      ++c;
    },
    dec: function () {
      --c;
    },
    get: function () {
      return c;
    },
    reset: function () {
      c = 0;
    },
  };
}

const myCounter = counter();

console.log(myCounter.inc());
console.log(myCounter.get()); //1

console.log(myCounter.dec());
console.log(myCounter.reset());
</code></pre>
<p>Inner variables and functions of <code>counter</code> function are hidden from other functions. Using closure you can encapsulate your private methods. Consider another example:<br /><br /></p>
<pre class="language-javascript"><code>function calculate() {
  const rate = 5;
  return {
    intrest: function (principal, time) {
      return (principal * rate * time) / 100;
    },
    totalAccruedAmount: function (principal, time) {
      return principal + (principal * rate * time) / 100;
    },
  };
}

const calculator = calculate();

console.log(calculator.intrest(1000, 5));
console.log(calculator.totalAccruedAmount(1000, 5));</code></pre>
<p>In this example interest rate is private and only closure functions can access interest rate. It is hidden from the outer scope and cant be accessed by other scopes.&nbsp;<br /><br />You can use closures to hide implementation details and declare private variables.</p>
<p>&nbsp;</p>
</div>
</div>

How to redirect or navigate to another page in javascript and react

Write react components in typescript - a model component

Learn what is clousers in Javascript